@{
    ViewData["Title"] = "编辑库位设置";
    Layout = null;
    var model = ViewBag.Model as ThridGroup.ERP.Application.Contracts.DTO.WarehouseManagement.WarehouseLocationSettingDto;
    var isEdit = model != null;
    var areaId = isEdit ? model.WarehouseAreaId : ViewBag.AreaId;
    var areaName = isEdit ? model.WarehouseAreaName : ViewBag.AreaName;
    var warehouseName = isEdit ? model.WarehouseName : ViewBag.WarehouseName;
}

<!-- 直接引入所有必要的CSS和JS文件 -->
<link href="~/libs/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
<script src="~/libs/jquery/jquery.js"></script>
<script src="~/libs/scripts/layui-v2.5.6/layui/layui.js"></script>

<!-- 自定义样式 -->
<style>
    .edit-container {
        padding: 20px;
        background: #fff;
        font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
    }
    
    .layui-form-label {
        width: 120px;
        color: #333;
        font-weight: normal;
    }
    
    .layui-input-block {
        margin-left: 150px;
    }
    
    .layui-input, .layui-textarea {
        border: 1px solid #ddd;
        background: #fff;
        color: #333;
        border-radius: 4px;
        padding: 0 10px;
        transition: all 0.2s ease;
        font-size: 13px;
    }
    
    .layui-input:focus, .layui-textarea:focus {
        border-color: #1e9fff;
        box-shadow: 0 0 0 2px rgba(30,159,255,0.1);
        outline: none;
    }
    
    .layui-form-item {
        margin-bottom: 20px;
    }
    
    .layui-btn {
        border-radius: 4px;
        font-weight: normal;
        transition: all 0.2s ease;
    }
    
    .form-actions {
        margin-top: 30px;
        text-align: center;
        padding-top: 20px;
        border-top: 1px solid #eee;
    }
    
    .form-actions .layui-btn {
        padding: 0 30px;
        height: 38px;
        line-height: 38px;
        margin: 0 10px;
    }
    
    .form-title {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #eee;
    }
    
    .layui-form-mid {
        color: #999;
        font-size: 12px;
    }
    
    .layui-form-select dl dd.layui-this {
        background-color: #1e9fff;
    }
    
    /* 必填项标记 */
    .required:before {
        content: "*";
        color: #ff5722;
        margin-right: 3px;
    }
    
    /* 提示信息 */
    .tip-text {
        color: #999;
        font-size: 12px;
        margin-top: 5px;
    }
</style>

<div class="edit-container">
    <div class="form-title">
        @(isEdit ? "编辑" : "新增")库位设置
    </div>
    
    <form class="layui-form" lay-filter="locationForm">
        <!-- 隐藏字段 -->
        <input type="hidden" name="id" value="@(isEdit ? model.Id : 0)" />
        <input type="hidden" name="warehouseAreaId" value="@areaId" />
        
        <!-- 所属信息 -->
        <div class="layui-form-item">
            <label class="layui-form-label">所属仓库</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" value="@warehouseName" readonly />
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">所属库区</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" value="@areaName" readonly />
            </div>
        </div>
        
        <!-- 库位信息 -->
        <div class="layui-form-item">
            <label class="layui-form-label required">库位编码</label>
            <div class="layui-input-block">
                <input type="text" name="locationCode" lay-verify="required" placeholder="请输入库位编码" autocomplete="off" class="layui-input" value="@(isEdit ? model.LocationCode : "")" />
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label required">库位名称</label>
            <div class="layui-input-block">
                <input type="text" name="locationName" lay-verify="required" placeholder="请输入库位名称" autocomplete="off" class="layui-input" value="@(isEdit ? model.LocationName : "")" />
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">面积(㎡)</label>
            <div class="layui-input-block">
                <input type="number" name="area" placeholder="请输入面积" autocomplete="off" class="layui-input" value="@(isEdit ? model.Area : 0)" />
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">最大载重量</label>
            <div class="layui-input-block">
                <input type="number" name="maxCapacity" placeholder="请输入最大载重量" autocomplete="off" class="layui-input" value="@(isEdit ? model.MaxCapacity : 0)" />
            </div>
        </div>
        
        <!-- 坐标信息 -->
        <div class="layui-form-item">
            <label class="layui-form-label">坐标X</label>
            <div class="layui-input-block">
                <input type="number" name="locationX" placeholder="请输入X坐标" autocomplete="off" class="layui-input" value="@(isEdit ? model.LocationX : 0)" />
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">坐标Y</label>
            <div class="layui-input-block">
                <input type="number" name="locationY" placeholder="请输入Y坐标" autocomplete="off" class="layui-input" value="@(isEdit ? model.LocationY : 0)" />
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">坐标Z</label>
            <div class="layui-input-block">
                <input type="number" name="locationZ" placeholder="请输入Z坐标" autocomplete="off" class="layui-input" value="@(isEdit ? model.LocationZ : 0)" />
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">使用状态</label>
            <div class="layui-input-block">
                <input type="checkbox" name="isUsed" lay-skin="switch" lay-text="已使用|未使用" @(isEdit && model.IsUsed ? "checked" : "") />
            </div>
        </div>
        
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea name="remark" placeholder="请输入备注信息" class="layui-textarea">@(isEdit ? model.Remark : "")</textarea>
            </div>
        </div>
        
        <!-- 按钮区域 -->
        <div class="form-actions">
            <button type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">保存</button>
            <button type="button" class="layui-btn layui-btn-primary" id="cancelBtn">取消</button>
        </div>
    </form>
</div>

<script>
    layui.use(['form', 'layer'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;
        
        // 表单提交
        form.on('submit(saveBtn)', function (data) {
            var formData = data.field;
            
            // 处理复选框
            formData.isUsed = formData.isUsed === 'on';
            
            // 处理数值类型
            formData.area = parseFloat(formData.area) || 0;
            formData.maxCapacity = parseFloat(formData.maxCapacity) || 0;
            formData.locationX = parseInt(formData.locationX) || 0;
            formData.locationY = parseInt(formData.locationY) || 0;
            formData.locationZ = parseInt(formData.locationZ) || 0;
            
            // 构建请求URL和方法
            var url, method;
            if (parseInt(formData.id) > 0) {
                // 更新
                url = '/WarehouseManagement/WarehouseLocation/Update/' + formData.id;
                method = 'PUT';
            } else {
                // 新增
                url = '/WarehouseManagement/WarehouseLocation/Create';
                method = 'POST';
            }
            
            // 发送请求
            $.ajax({
                url: url,
                type: method,
                contentType: 'application/json',
                data: JSON.stringify(formData),
                success: function (res) {
                    if (res.code === 0) {
                        layer.msg('保存成功', {
                            icon: 1,
                            time: 1500
                        }, function () {
                            // 关闭弹窗并刷新父页面
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                        });
                    } else {
                        layer.msg(res.msg || '保存失败', {
                            icon: 2
                        });
                    }
                },
                error: function () {
                    layer.msg('网络错误，请稍后重试', {
                        icon: 2
                    });
                }
            });
            
            return false;
        });
        
        // 取消按钮
        $('#cancelBtn').on('click', function () {
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        });
        
        // 表单验证
        form.verify({
            required: function (value) {
                if (!value) {
                    return '必填项不能为空';
                }
            }
        });
        
        // 库位编码唯一性验证
        $('input[name="locationCode"]').on('blur', function () {
            var code = $(this).val();
            var id = $('input[name="id"]').val();
            
            if (code) {
                $.get('/WarehouseManagement/WarehouseLocation/CheckCodeExists', {
                    code: code,
                    id: id
                }, function (res) {
                    if (res.exists) {
                        layer.msg('库位编码已存在，请更换', {
                            icon: 2
                        });
                        $('input[name="locationCode"]').focus();
                    }
                });
            }
        });
    });
</script>